<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 200px;
            top:200px;
        }
    </style>
    <script>
        window.onload=function () {
            //拖拽box 拖拽流程  分析过程
            //1.当鼠标在被托拽的元素上按下时，开始拖拽 onmousedown
            //2.当时鼠标移动时，被拖拽元素跟随鼠标移动 onmousemove
            //3.当鼠标松开时，被拖拽的元素固定在当前位置上 onmouseup
            //开始写代码
            //1.当鼠标在被托拽的元素上按下时，开始拖拽 onmousedown
            //获取id为box1的元素
            var box1 = document.getElementById("box1");
            box1.onmousedown = function (event) {
                //设置box1捕获所有鼠标按下的事件
                ( box1.setCapture && box1.setCapture())||(box1.setPointerCapture && box1.setPointerCapture(1));
                //div的偏移量 鼠标.clientX-元素.offsetLeft
                //div的偏移量 鼠标.clientY-元素.offsetTop
                event=event||window.event;
                var el=event.clientX-box1.offsetLeft;
                var et=event.clientY-box1.offsetTop;
                // alert("hello");
                // 2.当时鼠标移动时，被拖拽元素跟随鼠标移动 onmousemove
                document.onmousemove = function (event) {
                    event = event || window.event;//浏览器兼容问题
                    var x = event.clientX-el;//获取x的坐标
                    var y = event.clientY-et;//获取y的坐标
                    //修改box1的位置
                    box1.style.left = x + "px";
                    box1.style.top = y + "px";
                };

                //3.当鼠标松开时，被拖拽的元素固定在当前位置上 onmouseup
                document.onmouseup=function () {
                    //取消document的onmousemove事件
                    document.onmousemove=null;
                    //取消document的onmouseup事件 这个事件只执行一次
                    document.onmouseup=null;
                    // alert("鼠标松开了");
                    //取消box1捕获所有鼠标按下的事件
                    ( box1.releaseCapture && box1.releaseCapture())||(box1.releasePointerCapture && box1.releasePointerCapture(1));
                };
                //当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中的内容，此时会导致拖拽功能异常，这个就是浏览器的默认行为
                //如果不想要 用return false取消默认行为
                return false;
            }
        }
    </script>
</head>
<body>
<script>
    /*拖拽box 拖拽流程
    *1.当鼠标在被托拽的元素上按下时，开始拖拽 onmousedown
    *2.当时鼠标移动时，被拖拽元素跟随鼠标移动onmousemove
   *3.当鼠标松开时，被拖拽的元素固定在当前位置上 onmouseup
   *
   */
</script>
我是P元素
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>